import createElement from './createElement'

export default function patchVnode(oldVnode, newVnode) {
  //判断新旧vnode是否是同一个对象
  if (oldVnode === newVnode) return
  //判断新vnode有没有text属性
  if (
    newVnode.text != undefined &&
    (newVnode.children == undefined || newVnode.children.length == 0)
  ) {
    console.log('新vnode有text属性')
    if (newVnode.text != oldVnode.text) {
      //如果新虚拟节点中的text和老的虚拟节点中的text不同，那么直接让新的text写入老的elm
      //中即可，如果老的elm中是children,那么也会立即消失掉
      oldVnode.elm.innerText = newVnode.text
    }
  } else {
    //新vnode没有text属性，有children
    console.log('新vnode没有text属性')
    //判断老的有没有children
    if (oldVnode.children != undefined && oldVnode.children.length > 0) {
      console.log('111111111111')
      //老的有children,此时就是最复杂的情况，就是新老都有children
      //所有未处理的节点的开头
      let un = 0
      for (let i = 0; i < newVnode.children.length; i++) {
        let ch = newVnode.children[i]
        //再次遍历，看看oldVnode中有没有节点和它相同
        let isExist = false
        //定义变量isExist，用来保存newVnode中的节点是否在老节点中存在
        //如果存在则isExist = true,此时un下标加一
        //如果不存在，则在老节点下标的前面插入新节点，此时un不变
        //继续循环，如果下一个新节点在老节点中不存在，则继续在老节点下标的前面插入新节点
        //该新节点会排在上一个新节点后面，老节点前面
        //继续循环，依次类推

        for (let j = 0; j < oldVnode.children.length; j++) {
          console.log(ch, 'oldVnode')
          if (
            oldVnode.children[j].sel == ch.sel &&
            oldVnode.children[j].key == ch.key
          ) {
            isExist = true
          }
        }
        //如果不存在时，意味着新节点在老节点中没有
        if (!isExist) {
          console.log('ch', ch, i)
          //创建新节点
          let dom = createElement(ch)
          //挂载到新节点的elm属性上
          ch.elm = dom
          //插入到老节点
          if (un < oldVnode.children.length) {
            oldVnode.elm.insertBefore(dom, oldVnode.children[un].elm)
          } else {
            oldVnode.elm.appendChild(dom)
          }
        } else {
          //让处理的节点指针下移
          un++
        }
      }
    } else {
      //老的没有children,新的有children
      //清空老的节点的内容
      oldVnode.elm.innerHTML = ''
      //遍历新的vnode的子节点，创建DOM，上树
      for (let i = 0; i < newVnode.children.length; i++) {
        let dom = createElement(newVnode.children[i])
        oldVnode.elm.appendChild(dom)
      }
    }
  }
}
